<template>
  <div class="content_left_sqryfb">
    <titleBox text="任务分析"></titleBox>
    <div class="content">
      <!-- <div style="display: flex; justify-content: space-between;">
        <div ref="echartsRef" id="eChart1" class="charts"></div>
        <div ref="echartsRef" id="eChart2" class="charts"></div>
      </div> -->

      <!-- <div style="background-image: url('/img/myimg/bt2.png'); background-size:150px 20px; font-size:12px; width:150px; height:20px; text-align: center; margin:10px 80px;">
        任务趋势
      </div> -->
      <div id="lineChart" style="height: 180px; width:310px;"></div>
    </div>
  </div>
</template>
<script setup>
import $api from "@/utils/request.js"
import { ref, getCurrentInstance, onMounted } from "vue"
import * as echarts from "echarts"
import titleBox from "../mConponents/titleBox.vue"
const echartsRef = ref(null)

const initLineChart = () => {
  const dom = document.getElementById("lineChart")
  const myChart = echarts.init(dom) // 初始化echarts实例
  const option = {

  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  legend: {
    show: false
  },
  grid: {
    top: "10%",
    left: "3%",
    right: "5%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: data.value.day,
      axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: "rgba(219, 225, 255, 1)"
            },
            formatter: function(params) {
              let newParamsName = ""
              const paramsNameNumber = params.length
              const provideNumber = 4
              const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (let p = 0; p < rowNumber; p++) {
                  let tempStr = ""
                  const start = p * provideNumber
                  const end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + "\n"
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
          }
        }
  ],
  yAxis: [
    {
      type: "value",
            splitNumber: 4,
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#BDBDBD",
                width: 1,
                type: "dotted"
              }
            },
            axisLabel: {
              // 设置y轴的文字的样式
              textStyle: {
                show: true,
                color: "#BDBDBD",
                fontSize: "12"
              }
            }
    }
  ],
  series: [
    {
      name: "分类名称1",
      type: "line",
      areaStyle: {},
      smooth: true,
      data: data.value.over_num
    },
    {
      name: "分类名称2",
      type: "line",
      areaStyle: {},
      smooth: true,
      data: data.value.take_num
    }
  ]
}
myChart.setOption(option)
}
const data = ref(null)
const getData = async () => {
  const res = await $api.get("/api/index/week_appeal_data")
  if (res.code === 1) {
    data.value = res.data
    initLineChart()
    // console.log(data.value)
  }
}
onMounted(() => {
  getData()

  // const dom = document.getElementById("eChart1")
  // const dom1 = document.getElementById("eChart2")
  // const myChart = echarts.init(dom) // 初始化echarts实例
  // const myChart1 = echarts.init(dom1) // 初始化echarts实例
  // const datas = [
  //         { value: 10, name: "话题类型1" },
  //         { value: 10, name: "话题类型2" },
  //         { value: 20, name: "话题类型3" },
  //         { value: 30, name: "话题类型4" }
  //       ]
  // const option = {
  //   grid: {
  //       left: "0%", // 可以调整这个值来改变饼图的位置，使其靠左显示
  //       containLabel: true
  //   },
  //   legend: {
  //     left: "left",
  //     x: "bottom",
  //     y: "bottom",
  //     itemGap: 8,
  //     orient: "vertical",
  //     itemHeight: 10,
  //     itemWidth: 10,
  //     textStyle: {
  //       rich: {
  //         name: {
  //           verticalAlign: "right",
  //           align: "left",
  //           width: 50,
  //           fontSize: 8,
  //           color: "#FFFFFF"
  //         },
  //         value: {
  //           align: "left",
  //           width: 35,
  //           fontSize: 8,
  //           color: "#FFFFFF"
  //         },
  //         count: {
  //           align: "left",
  //           width: 20,
  //           fontSize: 8,
  //           color: "#FFFFFF"
  //         }
  //       },
  //       color: "#54bef9"
  //     },
  //     data: datas.map((item) => item.name),
  //     formatter: function (name) {
  //       let total = 0
  //       let tarValue
  //       for (let i = 0; i < datas.length; i++) {
  //         total += datas[i].value
  //         if (name === datas[i].name) {
  //           tarValue = datas[i].value
  //         }
  //       }
  //       const p = Math.round((tarValue / total) * 100)
  //       return (
  //         "{name| " + name + "}  " + "{value| " + tarValue + "个}" + "{count| " + p + "%} "
  //       )
  //     }
  //   },
  //   series: [
  //     {
  //       type: "pie",
  //       radius: ["40%", "60%"], // 定义外层和内层的半径
  //       avoidLabelOverlap: false,
  //       center: ["50%", "27%"],
  //       borderWidth: 10,
  //       borderColor: "#fff",
  //       data: datas,
  //       label: {
  //         show: false // 隐藏默认的标签
  //       }
  //     },
  //     {
  //           z: 100,
  //           type: "gauge", // 这个type类型要设置为gauge
  //           radius: "-50%",
  //           center: ["50%", "27%"],
  //           // 配置中间的数字的样式
  //           detail: {
  //             // 调节数字位置
  //             offsetCenter: [-1, 12],
  //             color: "#fff",
  //             fontSize: "14px"
  //           },
  //           pointer: {
  //             show: false
  //           },
  //           axisTick: {
  //             show: false
  //           },
  //           axisLine: {
  //             show: false
  //           },
  //           splitLine: {
  //             show: false
  //           },
  //           axisLabel: {
  //             show: false
  //           },
  //           // 中间的字和数字 数据
  //           data: [
  //             {
  //               value: 1,
  //               name: "AI识别",
  //               title: {
  //                 show: true,
  //                 color: "#fff",
  //                 fontSize: 10,
  //                 offsetCenter: [0, "20%"]// 配置“总风险数”的位置
  //               }
  //             }

  //           ]
  //         }
  //   ]
  // }
  // // 设置实例参数
  // myChart.setOption(option)
  // myChart1.setOption(option)
})
</script>
<style scoped lang="less">
.content_left_sqryfb {
  margin-top: 10px;
  .content {
    padding: 10px;
    background-color: rgba(0, 26, 29, 0.8);
    width: 330px;
    // height: 150px;
    // border: 1px solid #11AFC180;
    // border-radius:5px;
    margin-top: 5px;
    // align-items: center;
    // display: flex;

    .charts {
      width: 150px;
      height: 200px;
    }

  }
}
</style>
